<template>
  <div class="app-container" ref="content">
    <div style="text-align: center;padding: 10px">{{title}}-{{maintenanceInfo.name}}-详情信息</div>
      <div style="margin: 10px auto;text-align: center">
        <el-button type="primary" size="mini"  @click="timeLineVisible=true" align="center">任务时间轴</el-button>
        <div v-if="maintenanceInfo.faultWorkOrder!=2">
            <el-button type="primary" size="mini" v-if="maintenanceInfo.status==3"  @click="show()" align="center">工单审核</el-button>
<!--            <el-button type="primary" size="mini"  @click="transferToMaintenanceEnterprises()" align="center">维保企业介入</el-button>-->
        </div>
      </div>

      <el-dialog  :title="title+'时间轴'"  :visible.sync="timeLineVisible">
          <el-timeline :reverse="true">
              <el-timeline-item
                      v-for="(activity, index) in maintenanceInfo.inMaintenanceFeedbackLogVoList"
                      :key="index"
                      :timestamp="activity.feedBackTime|dateFormat">
                  <p>{{ activity.feedBackRemark }}</p>
              </el-timeline-item>
          </el-timeline>
      </el-dialog>
    <div style="width: 50%;margin:0px auto;vertical-align:middle;height:100%">
      <el-form :model="maintenanceInfo" ref="maintenanceInfo" label-width="150px">
        <el-form-item label="工单名称:" prop="personLiableName">
          {{maintenanceInfo.name}}
        </el-form-item>
        <el-form-item label="责任人:" prop="personLiableName">
          {{maintenanceInfo.personLiableName}}
        </el-form-item>
        <el-form-item v-if="maintenanceInfo.faultWorkOrder!=2" label="责任企业:" prop="responsibleEnterpriseName">
          {{maintenanceInfo.responsibleEnterpriseName}}
        </el-form-item>
        <el-form-item v-if="maintenanceInfo.enterpriseName" label="业主名称:" prop="enterpriseName">
          {{ maintenanceInfo.enterpriseName }}
        </el-form-item>
        <el-form-item v-if="maintenanceInfo.designeeName" label="人员:" prop="designeeName">
            {{ maintenanceInfo.designeeName }}
        </el-form-item>
        <el-form-item  v-if="maintenanceInfo.equipmentName" label="设备名称:" prop="equipmentName">
          {{ maintenanceInfo.equipmentName }}
        </el-form-item>
        <el-form-item v-if="maintenanceInfo.faultWorkOrder!=2" label="维保企业:" prop="manitenanceEnterpriseName">
          {{ maintenanceInfo.manitenanceEnterpriseName }}
        </el-form-item>
        <el-form-item label="工单状态:" prop="status">
          {{maintenanceInfo.status}}
        </el-form-item>
        <el-form-item label="工单类型:" prop="faultWorkOrder">
          {{maintenanceInfo.faultWorkOrder==0?"故障工单":maintenanceInfo.faultWorkOrder==1?"维保工单":"消防隐患"}}
        </el-form-item>
        <el-form-item label="指定时间:" prop="designeeTime">
          {{ maintenanceInfo.designeeTime | dateFormat }}
        </el-form-item>
        <el-form-item label="消防确认时间:" prop="fireControlConfirmTime">
          {{ maintenanceInfo.fireControlConfirmTime | dateFormat }}
        </el-form-item>
<!--        <el-form-item label="预计结束时间:" prop="plannedEndTime">-->
<!--          {{ maintenanceInfo.plannedEndTime | dateFormat }}-->
<!--        </el-form-item>-->
<!--        <el-form-item label="实际结束时间:" prop="actualTime">-->
<!--          {{ maintenanceInfo.actualTime | dateFormat }}-->
<!--        </el-form-item>-->
      </el-form>
    </div>
    <el-dialog title="审核" :visible.sync="hidden">
      <div class="form">
        <el-form :model="feedbackFrom" ref="feedbackFrom" label-width="100px" :rules="feedbackFromRules">
          <el-form-item label="审核意见" prop="auditOpinion">
            <el-input v-model="feedbackFrom.auditOpinion" placeholder="请填写审核意见" clearable></el-input>
          </el-form-item>
          <el-form-item label="确定时间" prop="fireControlConfirmTime" >
            <el-date-picker v-model="feedbackFrom.fireControlConfirmTime" placeholder="选择日期时间" type="datetime" style="width: 100%">
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div slot="footer" style="text-align: center" class="dialog-footer">
          <el-button type="primary" @click="hidden=false">取消
          </el-button>
          <el-button type="primary" @click="auditFeedback">提交
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>


import {
  getInMaintenanceRecordVo,
  updateInMaintenanceRecord,
  transferToMaintenanceEnterprises
} from "../../api/maintenanceRecord";

export default {
  name: "maintenanceInfo",
  data(){
    return{
        timeLineVisible:false,
      maintenanceInfo:{
      },
      feedbackFrom:{
          ucId:this.$route.params.ucId
      },
      hidden:false,
      feedbackFromRules:{
        auditOpinion:{ required: true, message: '请输入审核意见', trigger: 'blur' },
        fireControlConfirmTime:{required: true, message: '请选择确认时间', trigger: 'blur'}
      }

    }
  },
  computed:{
      title(){
          let text = "消防隐患";
          switch (this.$route.params.faultWorkOrder){
              case 0:
                  text = "维保工单";
                  break;
              case 1:
                  text = "故障工单";
                  break;
              case 2:
                  text = "消防隐患";
                  break;
              default:
                  break;
          }
          return text;
      }
  },
  created() {
      console.log("123")
      console.log(this.$route.params.ucId)
      this.getInMaintenanceRecordVo()
  },
  methods: {
    show() {
      this.feedbackFrom={ucId:this.$route.params.ucId}
      this.hidden = true
      this.$nextTick(() => {
        this.$refs['feedbackFrom'].clearValidate();
      })
    },
    getInMaintenanceRecordVo() {
      let loadingInstance = this.$loading({
        target: this.$refs.content,
        text: '数据加载中'
      });
      getInMaintenanceRecordVo({ucId: this.$route.params.ucId}).then(res => {
        console.log(res)
        this.maintenanceInfo = res.data
        loadingInstance.close()
        this.$notify.success({
          title: '成功',
          message: "获取维保工单信息成功"
        })

      }).catch(error => {
        console.log(error)
        loadingInstance.close()
        this.$notify.error({
          title: '失败',
          message: "获取维保工单信息失败"
        })
      })
    },
    transferToMaintenanceEnterprises() {
      let loadingInstance = this.$loading({
        target: this.$refs.content,
        text: '数据加载中'
      });
      transferToMaintenanceEnterprises({ucId: this.$route.params.ucId}).then(res => {
        console.log(res)
        this.maintenanceInfo = res.data
        loadingInstance.close()
        this.$notify.success({
          title: '成功',
          message: "修改维保工单信息成功"
        })

      }).catch(error => {
        console.log(error)
        loadingInstance.close()
        this.$notify.error({
          title: '失败',
          message: "获取维保工单信息失败"
        })
      })
    },
    auditFeedback() {
      this.$refs['feedbackFrom'].validate(valid => {
        if (valid) {
          updateInMaintenanceRecord(this.feedbackFrom).then(res => {
            this.$notify.success({
              title: '成功',
              message: "反馈成功"
            })
            this.feedbackFrom={}
            this.hidden = false
          }).catch(res => {
            this.$notify.error({
              title: '反馈失败',
              message: res.msg
            })
          })
        } else {
          console.log("表单验证不通过")
        }
      })

    }
  }
}
</script>

<style>

</style>